import styles from './index.module.scss'
import { Popup, Tabs } from 'antd-mobile'
import { getHome } from '@/store/actions/home'
import { useInitialState } from '@/utils/use-initial-state'
import Channels from './components/Channels'
import ArticleList from './components/ArticleList'
import { useState } from 'react'
import Icon from '@/components/Icon'
import { toggleChannel } from '@/store/actions/home'
import { useDispatch } from 'react-redux'
import { useHistory } from 'react-router-dom'
const Home = () => {
  const dispatch = useDispatch()
  const history = useHistory()
  //拿数据
  const { channels, channelActiveKey } = useInitialState(getHome, 'home')
  const [visible, setVisble] = useState(false)
  //开
  const onChangeShow = () => {
    setVisble(true)
  }
  //关
  const onChangeHide = () => {
    setVisble(false)
  }
  const onTabChange = (key: string) => {
    dispatch(toggleChannel(+key))
  }
  return (
    <div className={styles.root}>
      {channels.length > 0 && (
        <Tabs
          className="tabs"
          activeLineMode="fixed"
          activeKey={channelActiveKey + ''}
          onChange={onTabChange}
        >
          {channels.map((item) => (
            <Tabs.Tab title={item.name} key={item.id}>
              内容
              <ArticleList channelId={item.id} />
            </Tabs.Tab>
          ))}
        </Tabs>
      )}
      <div className="tabs-opration">
        <Icon type="iconbtn_search" onClick={() => history.push('/search')} />
        <Icon type="iconbtn_channel" onClick={onChangeShow} />
      </div>

      <Popup
        visible={visible}
        onMaskClick={onChangeHide}
        position="left"
        className="channel-popup"
      >
        <Channels onClose={onChangeHide} />
      </Popup>
    </div>
  )
}
export default Home
